{% extends 'layout/manage.html' %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .list-group .choices {
            border-left: 2px solid #f90 !important;
        }

        textarea {
            width: 120px;
            resize: none; /* 禁止用户调整文本框的大小 */
            overflow-y: hidden; /* 隐藏竖直滚动条 */
        }

        .color-label {
            width: 100px;
            height: 50px;
            border: 1px solid black;
        }

        .layui-input:focus,.layui-textarea:focus{border-color:deepskyblue!important;}
        .layui-btn {background-color: deepskyblue;color: white}
    </style>
{% endblock %}

{% block content %}

    <div class="layui-container" style="margin-top: 20px">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">测试类</li>
                <li>安全类</li>
                <li>设计类</li>
                <li>网络类</li>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-address-card-o" aria-hidden="true"></i>
                                随机字符串生成
                            </div>
                            <div class="panel-body" style="height: 200px">

                                {#                        {% csrf_token %}#}
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">给定位数字符串</label>
                                    <div class="col-sm-5">
                                        <input id="generate_str_length" type="text"
                                               oninput="value=value.replace(/[^\d]/g,'')"
                                               maxlength="4" class="form-control" placeholder="请输入位数"
                                               name="str_length">
                                        <span class="error-msg">{{ error }}</span>
                                    </div>
                                    <div class="col-sm-3"><a
                                            href="https://www.cnblogs.com/printN/p/7252490.html"
                                            target="_blank">MySQL 数据库 varchar 到底可以存多少个汉字，多少个英文呢?
                                    </a></div>

                                </div>
                                <div class="form-group" style="padding-top: 35px">
                                    <div class="col-sm-offset-5 col-sm-5">
                                        <input id="generateStrBtn" type="button" class="btn btn-info" value="生 成">
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-8">
                                    <span><input type="input" id="generate_str"></span>
                                    <button onclick="touch()" id="copyText" type="button" class="success">复制文本
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-address-card-o" aria-hidden="true"></i>
                                Druid数据库密码加密
                            </div>
                            <div class="panel-body" style="height: 200px">

                                {#                        {% csrf_token %}#}
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">输入原Druid数据库密码</label>
                                    <div class="col-sm-5">
                                        <input id="original_pwd" type="text"
                                               class="form-control" placeholder="请输入原密码"
                                               name="original_pwd">
                                        <span class="error-msg">{{ error }}</span>
                                    </div>
                                    <div class="col-sm-3"><a
                                            href="https://github.com/alibaba/druid/wiki/%E4%BD%BF%E7%94%A8ConfigFilter#21-%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AF%86%E7%A0%81"
                                            target="_blank">使用ConfigFilter#21-执行命令加密数据库密码</a></div>

                                </div>
                                <div class="form-group" style="padding-top: 35px">
                                    <div class="col-sm-offset-5 col-sm-5">
                                        <input id="encryptPwdBtn" type="button" class="btn btn-info" value="生 成">
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-8">
                                    <div class="col-md-6">
                                        <span><input type="input" id="encrypt_pwd"></span>
                                        <button onclick="touch1()" id="copyText1" type="button" class="success">复制加密密码
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <span><input type="input" id="public_key"></span>
                                        <button onclick="touch2()" id="copyText2" type="button" class="success">
                                            复制PublicKey
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-address-card-o" aria-hidden="true"></i>
                                选择颜色获取色值
                            </div>
                            <div class="panel-body" style="height: 200px">

                                {#                        {% csrf_token %}#}
                                <div class="form-group">

                                    <label class="col-sm-4 control-label">输入#色值看颜色</label>
                                    <div class="col-sm-5">
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item">
                                                <div class="layui-input-inline" style="width: 120px;">
                                                    <input type="text" name="color" value="" placeholder="请选择颜色"
                                                           class="layui-input layui-border-blue" id="ID-colorpicker-demo-form-color">
                                                </div>
                                                <div class="layui-inline" style="left: -11px;">
                                                    <div id="ID-colorpicker-demo-form"></div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-sm-3"><a
                                            href="https://blog.csdn.net/xiaoyafang123/article/details/117286015"
                                            target="_blank">颜色的前世今生11·RGB显色系统详解
                                    </a></div>
                                    {#                                    <div class="col-sm-3"><a#}
                                    {#                                            href="https://github.com/alibaba/druid/wiki/%E4%BD%BF%E7%94%A8ConfigFilter#21-%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AF%86%E7%A0%81"#}
                                    {#                                            target="_blank">使用ConfigFilter#21-执行命令加密数据库密码</a></div>#}

                                </div>
                                {#                                <div class="form-group" style="padding-top: 35px">#}
                                {#                                    <div class="col-sm-offset-5 col-sm-5">#}
                                {#                                        <input id="encryptPwdBtn" type="button" class="btn btn-info" value="查 看">#}
                                {#                                    </div>#}
                                {#                                </div>#}
                                <br>
                                <div class="form-group" style="padding-top: 35px">
                                    <div class="col-sm-offset-5 col-sm-5">
                                        <input id="colorCopy" type="button" class="btn btn-info" value="复 制">
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-8">
                                    <div id="color_label" hidden="hidden" class="color-label" for=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-tab-item">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-address-card-o" aria-hidden="true"></i>
                                查看IPv4支持地址数
                            </div>
                            <div class="panel-body" style="height: 200px">

                                {#                        {% csrf_token %}#}
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">输入ipv4地址(192.168.0.1/24)</label>
                                    <div class="col-sm-5">
                                        <input id="ipv4" type="text"
                                               class="form-control" placeholder="请输入ipv4+子掩网码"
                                               name="ipv4">
                                        <span class="error-msg">{{ error }}</span>
                                    </div>
                                    <div class="col-sm-3"><a
                                            href="https://www.zhihu.com/question/57425335/answer/2504979101"
                                            target="_blank">ipv4是什么</a></div>

                                </div>
                                <div class="form-group" style="padding-top: 35px">
                                    <div class="col-sm-offset-5 col-sm-5">
                                        <input id="ipv4Check" type="button" class="btn btn-info" value="查 看">
                                    </div>
                                </div>
                                <br>
                                <div class="col-md-8">
                                    <div class="col-md-6">
                                        <span><input type="input" id="ipv4SupportSize"></span>
{#                                        <button onclick="touch1()" id="copyText1" type="button" class="success">复制加密密码#}
{#                                        </button>#}
                                    </div>
{#                                    <div class="col-md-6">#}
{#                                        <span><input type="input" id="public_key"></span>#}
{#                                        <button onclick="touch2()" id="copyText2" type="button" class="success">#}
{#                                            复制PublicKey#}
{#                                        </button>#}
{#                                    </div>#}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


    </div>
    <input id="csrf_token" value="{{ csrf_token }}" hidden="hidden"/>

{% endblock %}

{% block js %}
    <script>
        function generateStr() {
            generate_str_length = $("#generate_str_length").val()
            console.log('generate_str_length', generate_str_length)
            $.ajax({
                url: "{% url 'tool_generate_str' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'str_length': generate_str_length,
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        {#reloadWorkBenchJson()#}
                        $("#generate_str").show()
                        $("#copyText").show()
                        document.getElementById("generate_str").value = (res.str);
                        {#location.reload();#}
                        {#$("#tasklist").load(issues_object_list=[])#}
                    } else {

                    }
                }
            })
        }

        $("#colorCopy").click(colorCopy)

        function colorCopy() {
            // 获取文本框的值
            var colorInput = document.getElementById("ID-colorpicker-demo-form-color");
            if (colorInput.value.startsWith("#")) {
            } else {
                layer.msg('错误的色值，生成后请不要更改input')
                return
            }
            // 选择文本
            colorInput.select();
            // 复制文本到剪贴板
            document.execCommand("copy");
            // 取消文本选择
            window.getSelection().removeAllRanges();
            // 提示用户已复制
            layer.alert("已复制到剪贴板，" + colorInput.value);
        }

        {% comment %}function colorCopy() {
            let color_code = $("#color_pick").val()
            if (color_code.startsWith("#")){
            }else{
                color_code = "#"+color_code
            }
            $.ajax({
                url: "{% url 'color_picker' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'color_code': color_code,
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    alert(JSON.stringify(res.color))
                    if (res.status) {
                        $("#color_label").css('background-color', 'rgb'+(res.color))
                    } else {

                    }
                }

            })
        }{% endcomment %}

        $("#ipv4Check").click(ipv4Check)

        function ipv4Check(){
           $.ajax({
                url: "{% url 'resolve_mask_of_ipv4' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'ipv4': $("#ipv4").val(),
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        {#reloadWorkBenchJson()#}
                        $("#ipv4SupportSize").show()
                        document.getElementById("ipv4SupportSize").value = (res.support_ip_size);
                        {#$("#tasklist").load(issues_object_list=[])#}
                    } else {

                    }
                }

            })
        }

        function encryptPwd() {
            original_pwd = $("#original_pwd").val()
            console.log('original_pwd', original_pwd)
            $.ajax({
                url: "{% url 'tool_encrypt_druid_password' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'original_pwd': original_pwd,
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        {#reloadWorkBenchJson()#}
                        $("#encrypt_pwd").show()
                        $("#public_key").show()
                        $("#copyText1").show()
                        $("#copyText2").show()
                        document.getElementById("encrypt_pwd").value = (res.encrypt_pwd);
                        document.getElementById("public_key").value = (res.public_key);
                        {#location.reload();#}
                        {#$("#tasklist").load(issues_object_list=[])#}
                    } else {

                    }
                }

            })
        }

        $("#copyText").hide()
        $("#copyText1").hide()
        $("#copyText2").hide()
        $("#generate_str").hide()
        $("#encrypt_pwd").hide()
        $("#public_key").hide()
        $("#color_label").hide()
        $("#ipv4SupportSize").hide()

        $("#generateStrBtn").click(generateStr)
        $("#encryptPwdBtn").click(encryptPwd)

        function touch() {
            // 获取文本框的值
            var generate_str = document.getElementById("generate_str");
            // 选择文本
            generate_str.select();
            // 复制文本到剪贴板
            document.execCommand("copy");
            // 取消文本选择
            window.getSelection().removeAllRanges();
            // 提示用户已复制
            alert("已复制到剪贴板，文本长度：" + generate_str.value.length);
        }

        function touch1() {
            // 获取文本框的值
            var encrypt_pwd = document.getElementById("encrypt_pwd");
            // 选择文本
            encrypt_pwd.select();
            // 复制文本到剪贴板
            document.execCommand("copy");
            // 取消文本选择
            window.getSelection().removeAllRanges();
            // 提示用户已复制
            alert("已复制到剪贴板，文本长度：" + encrypt_pwd.value.length);
        }

        function touch2() {
            // 获取文本框的值
            var public_key = document.getElementById("public_key");
            // 选择文本
            public_key.select();
            // 复制文本到剪贴板
            document.execCommand("copy");
            // 取消文本选择
            window.getSelection().removeAllRanges();
            // 提示用户已复制
            alert("已复制到剪贴板，文本长度：" + public_key.value.length);
        }

        layui.use(function () {
            var colorpicker = layui.colorpicker;
            var $ = layui.$;
            // 渲染
            colorpicker.render({
                elem: '#ID-colorpicker-demo-form',
                color: '#1c97f5',
                done: function (color) {
                    $('#ID-colorpicker-demo-form-color').val(color);
                }
            });
        });


    </script>
{% endblock %}